<template>
  <div class="imgScroll scrolled">
    <span
      :class="{
        disable: ele.imgActiveIndex === 0,
        prevBtn: true
      }"
      :style="{ top: imgMargin + imgSize / 2 - 9 + 'px' }"
      @click="prevItem(activeIndex, ele)"
    ><i
      class="el-icon-arrow-left"
    /></span>
    <span
      :class="{
        disable: ele.imgActiveIndex === ele.images.length - 1,
        nextBtn: true
      }"
      :style="{ top: imgMargin + imgSize / 2 - 9 + 'px' }"
      @click="nextItem"
    ><i
      class="el-icon-arrow-right"
    /></span>
    <div class="variants" :style="{ padding: imgMargin + 'px 0' }">
      <ul :style="{ width: ele.images.length * (imgSize + imgMargin) + 'px' }">
        <li
          v-for="(item, imgIndex) in ele.images"
          :key="item.id"
          :style="{
            width:
              imgIndex === ele.images.length - 1
                ? imgSize + 'px'
                : imgSize + imgMargin + 'px'
          }"
        >
          <el-image
            fit="cover"
            :class="[ele.imgActiveIndex === imgIndex ? 'active' : '']"
            :style="{ width: imgSize + 'px', height: imgSize + 'px' }"
            :src="imgPrefix + item.uri"
            alt=""
            @click="clickImg(imgIndex, activeIndex)"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ele: {
      type: Object,
      required: true
    },
    // eslint-disable-next-line vue/require-prop-types
    productIndex: {
      default: null
    },
    imgSize: {
      type: Number,
      default: 29
    },
    imgMargin: {
      type: Number,
      default: 5
    },
    page: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeIndex: 0,
      step: 0
    };
  },
  mounted() {
    const varWidth = document.querySelector('.variants').clientWidth;
    const ulWidth = document.querySelector('.variants>ul').clientWidth;
    if (ulWidth > varWidth) {
      // 图片过多，需要移动ul
      this.step = Math.ceil(
        (ulWidth - varWidth) / (this.imgSize + this.imgMargin)
      );
    }
  },
  methods: {
    prevItem(index, ele) {
      if (ele.imgActiveIndex > 0) {
        if (this.activeIndex > this.ele.images.length - 1 - this.step) {
          const nowLeft = parseInt(
            window.getComputedStyle(document.querySelector('.variants>ul')).left
          );
          document.querySelector('.variants>ul').style.left =
            nowLeft + (this.imgMargin + this.imgSize) + 'px';
        } else {
          document.querySelector('.variants>ul').style.left = '0px';
        }
        this.$emit(
          'setShowImg',
          this.activeIndex - 1,
          this.productIndex && this.productIndex
        );
        this.activeIndex -= 1;
      }
    },
    nextItem() {
      if (this.activeIndex < this.ele.images.length - 1) {
        if (this.activeIndex >= this.ele.images.length - 1 - this.step) {
          const nowLeft = parseInt(
            window.getComputedStyle(document.querySelector('.variants>ul')).left
          );
          document.querySelector('.variants>ul').style.left =
            nowLeft - (this.imgMargin + this.imgSize) + 'px';
        }
        this.$emit(
          'setShowImg',
          this.activeIndex + 1,
          this.productIndex && this.productIndex
        );
        this.activeIndex += 1;
      }
    },
    clickImg(imgIndex, index) {
      this.activeIndex = imgIndex;
      this.$emit(
        'setShowImg',
        imgIndex,
        this.productIndex && this.productIndex
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.imgScroll {
  padding-top: 4px;
  &.scrolled {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
    .prevBtn {
      position: absolute;
      left: 0;
      font-size: 18px;
      cursor: pointer;
      &.disable {
        color: #848484;
        &:hover {
          cursor: default;
        }
      }
    }
    .nextBtn {
      position: absolute;
      right: 0;
      font-size: 18px;
      cursor: pointer;
      &.disable {
        color: #848484;
        &:hover {
          cursor: default;
        }
      }
    }
  }
  .variants {
    // width: 170px;
    overflow: hidden;
    ul {
      position: relative;
      left: 0;
      list-style: none;
      display: flex;
      flex-wrap: nowrap;
      margin: 0;
      .el-image {
        border: 1px dashed #ddd;
        overflow: hidden;
        cursor: pointer;
        &.active {
          border-color: red;
        }
        &:hover {
          border-color: red;
        }
      }
    }
  }
}
</style>
